<template>
    <div  
    :style="{
        // 背景颜色
        '--appBackgroundColor':el_rapidCSS.appBackgroundColor,
        '--headerBackgroundColor':el_rapidCSS.headerBackgroundColor,
        // 
        // 卡片样式
        '--backgroundColor': el_rapidCSS.backgroundColor,
        '--borderColor':el_rapidCSS.borderColor,
        '--cardFontColor':el_rapidCSS.cardFontColor,
        '--fontSize':el_rapidCSS.fontSize,
        // 表格编辑的颜色
        '--tableEditBackgroundColor':el_rapidCSS.tableBackgroundColor,
        '--tableEditFontColor':el_rapidCSS.tableFontColor,
        // 表格颜色
        '--tableBackgroundColor':el_rapidCSS.tableBackgroundColor,
        '--tableFontColor':el_rapidCSS.tableFontColor
    }"
    >
    <slot></slot>
    </div>
</template>
<script>
export default {
    name:"manageClass",
    props:{
        // 样式数据
        el_rapidCSS:[Object],
    },
    

}
</script>
<style lang="scss">    

    .manageClass{
        // 背景颜色
        .app-wrapper{
            background-color:var(--appBackgroundColor);
        }
        // 头部导航背景颜色
        .fixed-header{
            background-color:var(--headerBackgroundColor);
        }
        // 卡片样式
        .el-card__header{
            background-color: var(--backgroundColor);
            border-color: var(--borderColor);
            border-bottom: 1px solid #EBEEF5;
            font-size: var(--fontSize);
            color: var(--cardFontColor);
        }
        // 弹框
        .el-dialog__header{
            background: var(--backgroundColor);
            .el-dialog__title{
                font-size: var(--fontSize)!important;
            }
        }
        .el-dialog__footer{
            border-top: 1px solid var(--borderColor);
        }

        // 表格首行
        .has-gutter{
            tr th{
                background-color: var(--tableBackgroundColor);
                color:var(--tableFontColor);
                font-size: var(--fontSize);
            }
        }
    }

</style>